var completeDiv;
var inputField;
var nameTable;
var nameTableBody;
var tempInputValue;
var selectIndex = -1;//选中的

/**
 * 测试
 */
var jsFanList = new Array();

var result = new Array();
var lastResult = new Array();
lastResult = jsFanList;

var length=0;
var lastLength=0;
/**
 * 初始化
 */
function initVars() {
	inputField = document.getElementById("names");
	nameTable = document.getElementById("name_table");
	completeDiv = document.getElementById("popup");
	nameTableBody = document.getElementById("name_table_body");
	
	//清空
	result = [];
}


/**
 * 寻找匹配的
 */
function findNames() {
	var eventkey = window.event.keyCode;
	initVars();
	
	//按下的是ESC    
	if (eventkey == 27) {
		clearNames();
	}
	//方向键向下 和 向上
	//自动提醒的下拉菜单的选择
	else if (eventkey == 40 || eventkey == 38) {
		changeSelect(eventkey);
	} 
	
	//更新提醒 
	else {
		
		selectIndex = 0;//默认选中第一个
		clearNames();
		
		var value = inputField.value;//得到当前输入框的内容
		var valueString = value.trim();
		length = valueString.length;
		
		if(valueString.length == 0)
			return;
		
		//执行删除操作
		//lastResult要重新赋初值
		if(length<lastLength){
			lastResult = jsFanList;
		}
		
		for(var i=0;i<lastResult.length;i++){
			//找到匹配的
			if(lastResult[i].indexOf(valueString)!=-1){
				result.push(lastResult[i]);
			}
		}
		
		//开户提示框
		showMatchNames();
		
		if(length>lastLength){
			lastResult = result;//之所以这样做，是为了减少匹配的次数，提高速度
		}

		lastLength = length;
	}
}


/**
 * 隐藏提示框
 */
function clearNames(){
	
    var ind = nameTableBody.childNodes.length;
    for(var i=ind-1; i>=0; i--){
        nameTableBody.removeChild(nameTableBody.childNodes[i]);
    }
    completeDiv.style.border = "none";
    selectIndex = -1;//记得初始化
}


/**
 * 提示
 * 相近的都储存在result里
 */
function showMatchNames(){
	

	for(var i=0;i<result.length;i++){
		
		//创建单元格
        var row = document.createElement("tr"); 
        var cell = document.createElement("td");

        cell.onmouseout = function(){this.className = 'mouseOver';};
        cell.onmouseover = function(){this.className = 'mouseOut';};
        cell.setAttribute("bgcolor", "#fffafa");
        cell.setAttribute("border", "0");
        cell.onclick = function(){populateName(this);};//单击
        cell.onselect = function(){populateName(this);}; //选中

        
        //如果有完全匹配的，就选中
       // if(result[i]==inputField.value || result[i].equals(inputField.value)){
      //  	cell.onselect = true;
      //  }
        	
       var txtNode = document.createTextNode(result[i]);//一个近视匹配的作为单独一行
        cell.appendChild(txtNode);
        //cell.innerHTML="<a href='javascript:alert();clearNames();'>"+result[i]+"</a>";
        row.appendChild(cell);
        nameTableBody.appendChild(row);

	}
	
}

/**
 * 取出所选定的粉丝nickName
 * 并加入到选定列表里
 * @param cell
 */
function populateName(cell){
    inputField.value = cell.firstChild.nodeValue;
    
    
    
    
    
    
    clearNames();
}

/**
 * 上下键选中某一单元格
 * @param eventkey
 */
function changeSelect(eventkey){
    var jsFanListSize = nameTableBody.childNodes.length;
    if(jsFanListSize == null || jsFanListSize == 0)
        return;
   
    if(eventkey == 40 && selectIndex < jsFanListSize - 1){
        selectIndex++;
	}
    //向上
    else if(eventkey == 38 && selectIndex > -1){
        selectIndex--;
    }
    
    for(var i=0; i<jsFanListSize; i++){
        if(selectIndex == -1){
            nameTableBody.childNodes[i].style.backgroundColor = "#ffffff";
            nameTableBody.childNodes[i].style.color = "#000000";
        }else if(i == selectIndex){
            nameTableBody.childNodes[i].style.backgroundColor = "#fffafa";
            nameTableBody.childNodes[i].style.color = "#00f0f0";
            inputField.value = nameTableBody.childNodes[i].childNodes[0].innerHTML;
        }
        else{
            nameTableBody.childNodes[i].style.backgroundColor = "#ffffff";
            nameTableBody.childNodes[i].style.color = "#000000";
        }
    }
}


